<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      label-position="right"
      label-width="150px"
    >
      <h4 class="title_2">商机查询</h4>
      <el-row>
        <el-col :span="14">
          <el-form-item label="商机状态" prop="buseoppState">
            <CheckboxGroup
              v-model:values="queryParams.buseoppState"
              :options="checkboxGroupOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="查询日期自" prop="createTime">
            <el-date-picker
              v-model="queryParams.dateTimes"
              type="daterange"
              range-separator="至"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button icon="Search" type="primary" @click="getList"
          >搜索</el-button
        >
      </el-row>
    </el-form>

    <div class="mb10 flex_sb">
      <span class="title_2">商机列表</span>
      <div>
        <el-button plain type="success" icon="Download">导出</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="tableList">
        <el-table-column label="所属分公司" align="center" prop="createBranch" min-width="120" />
        <el-table-column label="潜在商机" align="center" prop="state1" min-width="110" />
        <el-table-column label="立项审批中" align="center" prop="state2" min-width="120"  />
        <el-table-column label="已审批跟进中" align="center" prop="state3" min-width="130" />
        <el-table-column label="完成" align="center">
            <el-table-column label="独家" align="center" prop="bidType1" min-width="80" />
            <el-table-column label="首席" align="center" prop="bidType2" min-width="80" />
            <el-table-column label="共保" align="center" prop="bidType3" min-width="80" />
            <el-table-column label="落标" align="center" prop="bidType4" min-width="80" />
            <el-table-column label="其他" align="center" prop="bidType5" min-width="80" />
        </el-table-column>
        <el-table-column label="总计" align="center" prop="sum" min-width="80" />
        <el-table-column label="完成率" align="center" prop="completionRate" min-width="100" />
        <el-table-column label="中标率" align="center" prop="biddingRate" min-width="100" />
        <el-table-column label="保费（万元）" align="center" prop="premium" min-width="120" />
        <el-table-column label="预计总保费（万元）" align="center" prop="estimatedTotalPremium" min-width="160" />
        <el-table-column label="目标保费（万元）" align="center" prop="targetPremium" min-width="130" />
    </el-table>
    <pagination
      v-show="total > 10"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
    
<script setup name="MyFollowing">
import CheckboxGroup from "@/components/CheckboxGroup";

// 列表查询逻辑-start
const loading = ref(false);
const tableList = ref([]);
const total = ref(0);
const queryRef = ref(null);
const checkboxGroupOptions = [
  { label: "全部", value: "all" },
  { label: "潜在商机", value: "1" },
  { label: "立项审批中", value: "2" },
  { label: "已审批跟进中", value: "3" },
  { label: "完成", value: "4" },
  { label: "失败", value: "5" },
];
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  dateTimes: [],
  buseoppState: []
});
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableList.value = [
      {
        createBranch: "北京分公司",
        state1: 10,
        state2: 20,
        state3: 30,
        bidType1: 40,
        bidType2: 50,
        bidType3: 60,
        bidType4: 70,
        bidType5: 80,
        sum: 360,
        completionRate: 83.33,
        biddingRate: 74,
        premium: 100,
        estimatedTotalPremium: 100,
        targetPremium: 100
      }
    ];
    total.value = Number(tableList.value.length);
    loading.value = false;
  }, 300);
};
const resetQuery = (formEl) => {
  queryRef.value.resetFields();
  getList();
};
getList();
// 列表查询逻辑-end
</script>
    
  <style lang="scss" scoped>
</style>
    